<html>
    <head>
        <style>
            body {
                padding: 0;
                margin: 0;
            }

            #box-a {
                width: 200px;
                height: 200px;
                position: absolute;
                left: 100px;
                top: 100px;
                background-color: #00cc88;
            }

            #box-b {
                position: absolute;
                top: 100px;
                left: 600px;
                width: 200px;
                height: 200px;
                background-color: #09f;
            }

            .child {
                position: relative;
                top: 20px;
                left: 20px;
                width: 100px;
                height: 100px;
                background-color: #ffcc00;
            }

            #trigger-overflow {
                width: 1px;
                height: 1px;
                position: absolute;
                top: 2000px;
                left: 2000px;
            }

            [data-layout-correct="false"] {
                background: #dd1144 !important;
                opacity: 0.5;
            }
        </style>
    </head>
    <body>
        <div id="box-a"><div class="child"></div></div>
        <div id="box-b"></div>
        <div id="trigger-overflow"></div>

        <script type="module" src="/src/imports/projection.js"></script>
        <script type="module" src="/src/imports/script-assert.js"></script>
        <script type="module" src="/src/imports/script-undo.js"></script>
        <script type="module">
            const { createNode } = window.Undo
            const { matchViewportBox, matchVisibility, matchOpacity } =
                window.Assert
            const { frame } = window.Projection

            const a = document.getElementById("box-a")
            const b = document.getElementById("box-b")
            const child = document.querySelector(".child")

            const aProjection = createNode(a)
            const bProjection = createNode(b)
            const childProjection = createNode(child, aProjection, {
                layoutId: "child",
            })

            aProjection.setValue("x", 100)
            bProjection.setValue("x", -100)

            frame.postRender(() => {
                aProjection.willUpdate()
                bProjection.willUpdate()
                childProjection.willUpdate()

                const childOrigin = child.getBoundingClientRect()

                const newChild = document.createElement("div")
                newChild.classList.add("child")
                b.appendChild(newChild)
                const newChildProjection = createNode(newChild, bProjection, {
                    layoutId: "child",
                })

                newChildProjection.root.didUpdate()

                frame.postRender(() => {
                    const newChildOrigin = newChild.getBoundingClientRect()

                    matchViewportBox(child, childOrigin)
                    matchViewportBox(newChild, childOrigin)
                    matchOpacity(child, 1)
                    matchOpacity(newChild, 0)
                })
            })
        </script>
    </body>
</html>
